<template>
  <div>
    <cus-modal
      ref="modal"
      :showFullscreen="true"
      title="采购单入库"
      :width="1260"
    >
      <cus-search style="margin: -30px 0 20px 0; padding: 20px 0 0 0">
        <cus-search-item>
          <Form
            class="flex"
            :model="form"
            ref="formValidate"
            @keydown.native.enter.prevent="onInit"
          >
            <FormItem
              label="采购计划名称"
              prop="purchasingPlanId"
              :label-width="110"
              class="mr_20 mb_20"
            >
              <Select
                placeholder="全部"
                clearable
                v-model="form.purchasingPlanId"
                style="width: 210px"
              >
                <Option
                  v-for="item in supplierPurchasingNameTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem
              label="供应商"
              prop="supplyId"
              :label-width="65"
              class="mr_20 mb_20"
            >
              <Select
                placeholder="全部"
                clearable
                v-model="form.supplyId"
                style="width: 210px"
              >
                <Option
                  v-for="item in supplierNameTree"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem
              label="采购单创建时间"
              :label-width="125"
              class="mr_20 mb_20"
            >
              <DatePicker
                type="daterange"
                @on-change="sDateChange"
                clearable
                ref="formDate"
                placeholder="开始日期 - 结束日期"
                style="width: 210px"
              />
            </FormItem>
            <div style="display: flex">
              <cusButton
                class="mr_20 mb_20"
                type="primary"
                @onClick="
                 pages.page = 1,  getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi()
                "
                >查询</cusButton
              >
              <cusButton class="mr_20 mb_20" type="primary" @onClick="reset()"
                >重置</cusButton
              >
            </div>
          </Form>
        </cus-search-item>
      </cus-search>
      <Table
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :height="data.length > 0 ? '' : '100'"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="onImport(row)"
            >
              导入
            </cus-button>
          </div>
        </template>
      </Table>
      <div class="mt_20" v-if="data.length > 0" style="margin-bottom: -20px">
        <cus-page
          :data="pages"
          class="mt_10"
          style="display: flex; justify-content: flex-end; align-items: center"
          @pageChange="
            getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi()
          "
        ></cus-page>
      </div>
      <div slot="footer">
        <slot name="footer"> </slot>
      </div>
    </cus-modal>
  </div>
</template>
<script>
import {
  getApiGoodsSelectNoDownloadAndNoStockBillPoOrderList,
  postApiGoodsInsertPoStockbillByPoOrder,
  postApiPurchasingGetAllPurchasingPlanPage,
} from "@/api/business/manager";
const form = {
  purchasingPlanId: "", // 采购计划id
  supplyId: "", //供应商id
  startTime: "", //开始时间
  endTime: "", //结束时间
};
const columns = [
  {
    title: "序号",
    type: "index",
    width: 75,
    align: "center",
  },
  {
    title: "采购计划名称",
    key: "supplierPurchasingName",
    minWidth: 125,
    align: "center",
  },
  {
    title: "采购单号",
    key: "billNo",
    minWidth: 125,
    align: "center",
  },
  {
    title: "供应商",
    key: "supplyName",
    minWidth: 125,
    align: "center",
  },
  {
    title: "采购单创建时间",
    key: "createTime",
    minWidth: 125,
    align: "center",
  },
  {
    title: "供应日期",
    key: "",
    minWidth: 125,
    align: "center",
    render: (h, params) => {
      return h("div", [
        h("span", `${new Date(params.row.deliveDate).Format("yyyy-MM-dd")}`),
      ]);
    },
  },
  {
    title: "供应星期",
    key: "week",
    minWidth: 125,
    align: "center",
  },
  {
    title: "操作",
    slot: "operation",
    minWidth: 125,
    fixed: "right",
    align: "center",
  },
];
export default {
  data() {
    return {
      loading: false,
      form, //form表单
      columns, //表头
      data: [], //表数据
      supplierNameTree: [], // 供应商列表
      supplierPurchasingNameTree: [], // 采购计划名称
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  mounted() {},
  methods: {
    show() {
      this.loading = false;
      this.$refs["modal"].show = true;
      this.onInit();
    },
    onInit() {
      this.postApiPurchasingGetAllPurchasingPlanPageApi()
      setTimeout(()=>{
        this.getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi()
      },200)
    },
    // 重置搜索
    reset() {
      this.$refs.formDate.handleClear(); //清空时间
      this.$refs["formValidate"].resetFields();
      this.getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi();
    },
    sDateChange(time) {
      this.form.startTime = time[0];
      this.form.endTime = time[1];
      // this.getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi();
    },
    // 导入
    onImport(row) {
      this.postApiGoodsInsertPoStockbillByPoOrderApi(row.id);
    },
    // 采购单入库列表--------------------------------------------接口
    getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          purchasingPlanId: this.form.purchasingPlanId, // 采购计划id
          supplyId: this.form.supplyId, //供应商id
          startTime: this.form.startTime, //开始时间
          endTime: this.form.endTime, //结束时间
        };
        getApiGoodsSelectNoDownloadAndNoStockBillPoOrderList(params).then(
          (res) => {
            this.loading = false;
            if (res.retCode === 2000) {
              res.data.records.forEach((element) => {
                this.supplierPurchasingNameTree.forEach((elemen) => {
                  if (element.purchasingPlanId == elemen.id) {
                    element.supplierPurchasingName = elemen.name;
                  }
                });
              });
              this.data = res.data.records;
              this.pages.pageTotal = res.data.total;
              resolve(res.data.records);
            }
          }
        );
      });
    },
    // 采购单入库-导入----------------------------接口
    postApiGoodsInsertPoStockbillByPoOrderApi(id) {
      return new Promise((resolve) => {
        postApiGoodsInsertPoStockbillByPoOrder({ id: id }).then((res) => {
          this.$cu.hideLoading(2.5);
          if (res.retCode === 2000) {
            this.$Message.success(res.retMsg);
            this.getApiGoodsSelectNoDownloadAndNoStockBillPoOrderListApi();
            this.$parent.getGoodsStockbilListApi();
            resolve();
          }
        });
      });
    },
    //采购单查询---------------------------------接口
    postApiPurchasingGetAllPurchasingPlanPageApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        let params = {
          size: -1,
          current: this.pages.page,
        };
        postApiPurchasingGetAllPurchasingPlanPage(params).then((res) => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.supplierPurchasingNameTree = res.data.records;
            resolve();
          }
        });
      });
    },
  },
  watch: {},
  computed: {},
};
</script>
<style lang="less" scoped>
</style>